<template>
  <div
    id="app"
    class="main"
  >
    <div
      id="boxMap"
      class="map"
    />
    <div class="nav">
      中天高科通信管道智慧管理平台
    </div>
    <div class="nav_btn">
      <div class="btn_left">
        <!-- <div
          class="sel_btn"
          @click="openDialog"
        >
          {{ buttonName }}
          <i
            class="el-icon-arrow-down"
            color="#0efcff"
          />
        </div>
        <div
          v-if="showDialog"
          class="list-dialog"
        >
          <el-checkbox
            v-model="checkAll"
            text-color="#0EFCFF"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
            国家高速
          </el-checkbox>
          <div style="margin: 15px 0" />
          <el-checkbox-group
            v-model="checkedCities"
            text-color="#0EFCFF"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="city in cities"
              :key="city"
              text-color="#0EFCFF"
              :label="city"
            >
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
          <br>
          <el-checkbox
            v-model="checkAll1"
            text-color="#0EFCFF"
            :indeterminate="isIndeterminate1"
            @change="handleCheckAllChange1"
          >
            分公司
          </el-checkbox>
          <div style="margin: 15px 0" />
          <el-checkbox-group
            v-model="checkedCities1"
            text-color="#0EFCFF"
            @change="handleCheckedCitiesChange1"
          >
            <el-checkbox
              v-for="city in cities1"
              :key="city"
              text-color="#0EFCFF"
              :label="city"
            >
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
        </div> -->
      </div>
      <div class="btn_right">
        <!-- <a href="http://texasbarbecue.gitee.io/bigscreen1/">
          <div class="btn_list">通信管道总览数据</div>
        </a> -->
      </div>
    </div>
    <div class="content">
      <div class="centerBox">
        <div
          class="baseBox centerMainBox1"
          style="height: 70%"
        >
          <div class="baseBoxLeft left">
            <div class="boxTitle">
              分公司名称
            </div>
            <img
              src="../assets/img/left.png"
              alt=""
            >
            <div class="equipment-box">
              <table class="equipment_table env_table table_left">
                <tr>
                  <!-- item.Map, index -->
                  <td>分公司名称</td>
                  <td style="width:80px">
                    管理里程<br>（公里）
                  </td>
                  <td style="width:80px">
                    租赁里程<br>（公里）
                  </td>
                </tr>

                <tr
                  v-for="(item, index) in componyManageKM"
                  :key="index"
                  :class="{active:flag==index}"
                  @click="clickTr(item, index)"
                >
                  <td>{{ item[0] + '分公司' }}</td>
                  <td>{{ item[1]}}</td>
                  <td>{{ item[2]}}</td>
                </tr>
                <tr>
                  <td>岳常公司</td>
                  <td>141.030</td>
                  <td>0</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="baseBoxRight right">
            <ul class="plant">
              <li>
                <a
                  class="jumps"
                  href="./teaGarden.html"
                >
                  <div class="clear plantTop">
                    <span class="flexLeft">管辖路程（公里）</span>
                    <img
                      class="flexright"
                      src="../assets/img/cy.png"
                      alt=""
                    >
                  </div>

                  <p class="plantNum1">6262.348</p>
                  <span class="spans0" />
                </a>
              </li>
              <li>
                <a
                  class="jumps"
                  href="./Tea-enterprises.html"
                >
                  <div class="clear plantTop">
                    <span class="flexLeft">租赁里程（公里）</span>
                    <img
                      class="flexright"
                      src="../assets/img/cq.png"
                      alt=""
                    >
                  </div>
                  <p class="plantNum1">924.976</p>
                  <span class="spans1" />
                </a>
              </li>
              <li>
                <a
                  class="jumps"
                  href="./teaPeasant.html"
                >
                  <div>
                    <span>年租赁里程（公里）</span>
                    <img
                      src="../assets/img/cn.png"
                      alt=""
                    >
                  </div>
                  <p class="">924.976</p>
                  <span class="spans2" />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="leftBox right"
        style="width: 22%"
      >
        <div class="baseBox baseBox2">
          <div class="boxTitle">
            租赁合同信息
          </div>
          <img
            src="../assets/img/left.png"
            alt=""
          >
          <div class="equipment-box">
            <table class="equipment_table env_table table_left">
              <tr>
                <!-- item.Map, index -->
                <td>合同编号</td>
                <td style="width:80px">
                  租赁里程<br>（公里）
                </td>
              </tr>
              <tr
                v-for="(item, index) in contract"
                :key="index"
                :class="{active:flag4==index}"
                @click="clickTr2(item,index)"
              >
                <td>{{ item.Num }}</td>
                <td>{{ item.Mileage }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title='租赁合同信息'
      class="map_dialog"
      width="620px"
      :modal="false"
      :close-on-click-modal="false"
      :visible.sync="showContractDialog"
    >
      <div class="dialog_bottom">
        <div class="base_data">
          <p>高速名称：<span>{{this.currentContract.highWayName}}</span></p>
          <p>合同编号：<span>{{this.currentContract.Num}}</span></p>
          <p>租赁时间：<span>{{this.currentContract.contractDate}}</span></p>
          
          <!-- <p>位置：<span>{{ }}</span></p> -->
          <!-- <p>租赁单位：<span>{{ }}</span></p> -->
        </div>
        <div class="pipe_data">
          <p>桩号：<span>{{this.currentContract.stakeNum}}</span></p>
          <p>租赁里程：<span>{{this.currentContract.Mileage}}</span></p>
          <p>签约时间：<span>{{this.currentContract.timeOfContract}}</span></p>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="连霍高速-K49+850"
      class="map_dialog"
      width="620px"
      :modal="false"
      :close-on-click-modal="false"
      :visible.sync="showMapDialog"
    >
      <div class="top">
        <div class="img">
          <img
            :src="require('@/assets/pointPic.png')"
            alt=""
          >
        </div>
        <div
          class="steps"
        >
          <div
            v-for="(item, index) in leftList"
            :key="index"
            :class="{active:flag1==index}"
            class="step"
            @click="clickIcon($event, item, index)"
          >
            <div class="icon">
              <div
                class="point"
                :class="{'lease':item.State==1,'used':item.State==2,'space':item.State==3}"
              />
            </div>
            <div
              class="detail"
              :class="{'current':item.Num=='G30/K258+881/003E'}"
            >
              <span class="num">{{ item.Num }}</span>
              <span class="state">{{ item.State == 1 ? '租赁' : item.State == 2 ? '自用' : '空闲' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog_bottom">
        <div class="base_data">
          <p>具体业务：<span>收费</span></p>
          <p>经度：<span>{{ historyPoint.Point[0] }}</span></p>
          <p>纬度：<span>{{ historyPoint.Point[1] }}</span></p>
          <p>人手孔桩号：<span>{{ historyPoint.HoleNum }}</span></p>
          <!-- <p>位置：<span>{{ }}</span></p> -->
          <p>归属业主单位：<span>{{historyPoint.CompanyName}}</span></p>
          <!-- <p>租赁单位：<span>{{ }}</span></p> -->
        </div>
        <div class="pipe_data">
          <div class="btn_group">
            <button 
              :class="{active:flag3==1}"
              @click="prev()"
            >
              上行
            </button>
            <button
              :class="{active:flag3==2}"
              @click="next()"
            >
              下行
            </button>
          </div>
          <div
            class="step"
          >
            <div class="icon">
              <div
                class="point"
                :class="{'lease':historyPoint.State==1,'used':historyPoint.State==2,'space':historyPoint.State==3}"
              />
            </div>
            <div
              class="detail"
            >
              <span class="status">{{ historyPoint.Use }} &nbsp;&nbsp;&nbsp;&nbsp; 具体业务：{{ historyPoint.Business }}</span>
            </div>
          </div>
          <p>合同编号：<span>{{ historyPoint.ContractNum }}</span></p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import route from '../../route.js'
import { _throttle } from '@/utils'
import { debounce } from '@/utils'

export default {
  components: {},
  data() {
    return {
      leftTitle: 'K49+850',
      historyPoint: {
        State: -1,
        Point: [],
        Use: '',
        Business: '',
        ContractNum: '',
        CompanyName:''
      },
      leftList: [
        {
          Num: 1,
          Color: '红X2',
          State: 2,
          Use: '自用',
          Fee: '',
          HoleNum: 'K48+100',
          Point: [ 114.337568846791243, 34.844352712192673 ],
          ContractNum: '',
          CompanyName:"洛阳分公司",
          Business: '收费'
        },
        {
          Num: 2,
          Color: '黄X2',
          State: 2,
          Use: '自用',
          Fee: '',
          HoleNum: 'K50+500',
          Point: [ 114.732015809232436, 34.801817851556279 ],
          ContractNum: '',
          Business: '监控'
        },
        {
          Num: 3,
          Color: '绿X2',
          State: 1,
          Use: '自用',
          Fee: '',
          HoleNum: 'K49+852',
          Point: [ 114.685084303504368, 34.818070540097033 ],
          ContractNum: 'E-ZY2022039',
          Business: '通信'
        },
        {
          Num: 4,
          Color: '蓝X2',
          State: 1,
          Use: '自用',
          Fee: '',
          HoleNum: 'K49+853',
          Point: [ 114.513138340327558, 34.83606370261959 ],
          ContractNum: 'E-ZY2022040',
          Business: '收费'
        },
        {
          Num: 5,
          Color: '紫X2',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+854',
          Point: [ 114.36865672532727, 34.846679252760325 ],
          ContractNum: 'E-ZY2022041',
          Business: '空闲'
        },
        {
          Num: 6,
          Color: '白X2',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+855',
          Point: [ 114.394618938316242, 34.844579557984879 ],
          ContractNum: 'E-ZY2022042',
          Business: '空闲'
        },
        {
          Num: 7,
          Color: '红X2',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+856',
          Point: [ 114.433146856974801, 34.83203657231072 ],
          ContractNum: 'E-ZY2022043',
          Business: '空闲'
        },
        {
          Num: 8,
          Color: '黄X4',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+857',
          Point: [ 114.444169992985437, 34.829403534019477 ],
          ContractNum: 'E-ZY2022044',
          Business: '空闲'
        },
        {
          Num: 9,
          Color: '绿X4',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+858',
          Point: [ 114.406053943963187, 34.840733998724218 ],
          ContractNum: 'E-ZY2022045',
          Business: '空闲'
        },
        {
          Num: 10,
          Color: '蓝X4',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+859',
          Point: [ 114.360200907690455, 34.84617509082701 ],
          ContractNum: 'E-ZY2022046',
          Business: '空闲'
        },
        {
          Num: 11,
          Color: '紫X4',
          State: 3,
          Use: '租赁',
          Fee: '',
          HoleNum: 'K49+860',
          Point: [ 114.36338065070359, 34.846399456798309 ],
          ContractNum: 'E-ZY2022047',
          Business: '出租'
        },
        {
          Num: 12,
          Color: '白X4',
          State: 3,
          Use: '租赁',
          Fee: '',
          HoleNum: 'K49+861',
          Point: [ 114.460614740731515, 34.828711536445837 ],
          ContractNum: 'E-ZY2022048',
          Business: '出租'
        }
      ],
      linkData: [],
      linkArray: [
        [
          {
            Num: 'G30/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G30/K258+881',
            Status: '自用',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G30/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G30/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G30/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }
        ],
        [
          {
            Num: 'G31/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G31/K258+881',
            Status: '自用',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G31/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G31/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G31/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }
        ],
        [
          {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G32/K258+881',
            Status: '自用',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }
        ]
      ],
      flag: -1,
      flag1: 0,
      flag3: -1,
      flag4: -1,
      current:'active',
      loading: true,
      showContractDialog:false,
      showDialog: false,
      showMapDialog: false,
      name: '',
      cityOptions: [
        '京港澳高速',
        '连霍高速',
        '济广高速',
        '宁洛高速',
        '沪陕高速',
        '大广高速',
        '二广高速',
        '德上新建高速',
        '郑州西南环城高速',
        '长济高速',
        '郑州机场路',
        '南林高速',
        '范辉高速',
        '新济高速'
      ],
      buttonName: '请选择',
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      cityOptions1: [
        '安新分公司',
        '恒淮分公司',
        '开封分公司',
        '洛阳分公司',
        '南阳分公司',
        '三门峡分公司',
        '商丘分公司',
        '桃花峪黄河大桥',
        '信阳分公司',
        '禹登分公司'
      ],
      checkAll1: false,
      checkedCities1: [],
      cities1: [],
      isIndeterminate1: true,
      currentContract:[
        {
          Num:'',
          Map:[],
          Mileage:'',
          contractDate:'',
          highWayName:'',
          stakeNum:''
      }
      ],
      contract: [],
      contractData: [
        {
          Num: 'E-ZY2022037',
          Map: [ '三门峡', [111.19,	34.76],0],
          Mileage: '326.5',
          contractDate:'2022.5.26-2037.5.25',//合同期限
          highWayName:'G30连霍高速',//高速名称
          stakeNum:'K283+718-K610+300',//桩号
          timeOfContract:'2022.11.29',
          roadIndex:['0','1','2']
        },
        {
          Num: 'CU12-4102-2022-002138',
          Map: [ '商丘', [115.65,	34.44],4],
          Mileage: '37.638',
          contractDate:'2022.6.1-2037.5.31',//合同期限
          highWayName:'S49焦桐高速、G1516盐洛高速',//高速名称
          stakeNum:'K55+800-K92、K794+638-K792+400',//桩号
          timeOfContract:'2022.4.15',
          roadIndex:[]

        },
        {
          Num: 'HAZZS2206950ACN00',//合同编号
          Map: [ '郑州', [113.65, 34.73],2],
          Mileage: '38.438',//租赁公里数
          contractDate:'2022.11.18-2037.11.17',//合同期限
          highWayName:'S49焦桐高速、G1516盐洛高速',//高速名称
          stakeNum:'K55+800-K92、K794+638-K792+400',//桩号
          timeOfContract:'2022.12.5',
          roadIndex:[]
        },
        {
          Num: 'HASGS2300012BCN00',
          Map: [ '三门峡', [111.19,	34.76],0],
          Mileage: '520',
          contractDate:'2023.10.1-2038.9.30',//合同期限
          highWayName:'S40沪陕高速',//高速名称
          stakeNum:'K763-K1283',//桩号
          timeOfContract:'',
          // roadIndex:[]
        },
        {
          Num: 'HASGS2300010BCN00',
          Map: [ '信阳', [113.65, 34.73],2],
          Mileage: '2.4',
          contractDate:'2023.10.1-2038.9.30',//合同期限
          highWayName:'S4京港澳高速',//高速名称
          stakeNum:'K1005+100-K1007+500',//桩号
          timeOfContract:'',
          roadIndex:[]
        }
      ],
      contractData1: [
        [
        {
          Num: 'E-ZY2022037',
          Map: [ '三门峡', [111.19,	34.76],0],
          Mileage: '326.5',
        },
        {
          Num: 'CU12-4102-2022-002138',
          Map: [ '商丘', [115.65,	34.44],4],
          Mileage: '37.638',
        },
        {
          Num: 'HAZZS2206950ACN00',//合同编号
          Map: [ '郑州', [113.65, 34.73],2],
          Mileage: '38.438',//租赁公里数
        },
        {
          Num: 'HASGS2300012BCN00',
          Map: [ '三门峡', [111.19,	34.76],0],
          Mileage: '520',
        },
        {
          Num: 'HASGS2300010BCN00',
          Map: [ '信阳', [113.65, 34.73],2],
          Mileage: '2.4',
        }
        ]
      ],
      companyList: [
      '三门峡分公司', '洛阳分公司', '郑州分公司', '开封分公司', '商丘分公司', '南阳分公司', '漯河分公司', '许昌分公司', '平顶山分公司', '周口分公司', '驻马店分公司', '新乡分公司', '鹤壁分公司', '焦作分公司', '濮阳分公司', '安阳分公司', '信阳分公司', '济源分公司'
      ],
      componyManageKM: [
        [ '三门峡',421.051,109.35],
        [ '洛阳',578.461,211,19],
        [ '郑州',326.49,184,11],
        [ '开封', 201.61,2.4],
        [ '商丘', 375.579,0],
        [ '南阳',578.658,0],
        [ '许昌', 134.887,0],
        [ '平顶山',195.514,0],
        [ '周口',282.54,0],
        [ '驻马店',536.839,0],
        [ '新乡',203.581,0],
        [ '鹤壁',155.292,0],
        [ '焦作',174.107,0],
        [ '濮阳',250.554,0],
        [ '安阳',169.4554,0],
        [ '信阳',618.243,0],
        [ '济源',125.609,0]
      ],
      componyPoint: [
        [ '三门峡', [111.19,	34.76],242],
        [ '洛阳', [112.4, 34.67],342],
        [ '郑州', [113.65, 34.73],322],
        [ '开封', [114.35, 34.78],223],
        [ '商丘', [115.65,	34.44],221],
        [ '南阳', [],365],
        [ '漯河', [],457],
        [ '许昌', [],345],
        [ '平顶山', [],222],
        [ '周口', [],275],
        [ '驻马店', [],221],
        [ '新乡', [],154],
        [ '鹤壁', [],366],
        [ '焦作', [],521],
        [ '濮阳', [],124],
        [ '安阳', [],634],
        [ '信阳', [],245],
        [ '济源', [],246]
      ],
      markerList: [
        [ '三门峡', [[ 111.354956800349171, 34.718578436843529 ], [ 110.703327891958239, 34.573926198110762 ]]],
        [ '洛阳', [[ 112.616144887193585, 34.777550847790415 ],  [ 112.735157271283953, 34.770976205122032 ]]],
        [ '郑州', [[ 113.65401555845159, 34.84724510604773 ], [ 112.986589235945189, 34.779931849253892 ],  [ 114.14926855638852, 34.840082199920282 ]]],
        [ '开封', [ [ 114.296053198404692, 34.844038850788003 ]]],
        [ '商丘', [[ 115.556887675374057, 34.373043127636961 ],	[ 116.476450420668996, 34.157622422606508 ]]]
      ],
      markerList1:[  
        {
          id:0,
          name:'三门峡',
          lnglat:[ 111.354956800349171, 34.718578436843529 ],
        }
      ],
      pointArr: [],
      mask1: '',
      mask2:[],
      mask3: '',
      markers: [],
      polylines: [],
      map: ''
    }
  },
  created() {
  },
  mounted () {

    this.pointArr = route
    this.contract = this.contractData
    this.select() 
    this.cities = this.cityOptions
    this.cities1 = this.cityOptions1
    this.setMap()
  },
  beforeDestroy() {
    
   },
  methods: {
    select () {
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : []
      this.isIndeterminate = false
      this.buttonName = this.checkedCities[0]
        ? this.checkedCities[0].slice(0, 5) + '...'
        : '请选择'
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length
      this.buttonName = this.isIndeterminate
      this.buttonName =
        this.checkedCities.length > 0
          ? this.checkedCities[0].length > 5
            ? this.checkedCities[0].slice(0, 5) + '...'
            : this.checkedCities.length > 1
              ? this.checkedCities[0] + '...'
              : this.checkedCities[0]
          : '请选择'
    },
    handleCheckAllChange1(val) {
      this.checkedCities1 = val ? this.cityOptions1 : []
      this.isIndeterminate1 = false
      this.buttonName = this.checkedCities1[0]
        ? this.checkedCities1[0].slice(0, 5) + '...'
        : '请选择'
    },
    handleCheckedCitiesChange1(value) {
      const checkedCount1 = value.length
      this.checkAll1 = checkedCount1 === this.cities1.length
      this.isIndeterminate1 =
        checkedCount1 > 0 && checkedCount1 < this.cities1.length
      console.log(3333, this.checkedCities1[0])
      this.buttonName =
        this.checkedCities1.length > 0
          ? this.checkedCities1[0].length > 5
            ? this.checkedCities1[0].slice(0, 5) + '...'
            : this.checkedCities1.length > 1
              ? this.checkedCities1[0] + '...'
              : this.checkedCities1[0]
          : '请选择'
    },

    openDialog() {
      const icon = document.getElementsByClassName('el-icon-arrow-down')[0]
      if (icon.classList.contains('arrow')) {
        icon.classList.replace('arrow', 'arrow-up')
      } else if (icon.classList.contains('arrow-up')) {
        icon.classList.replace('arrow-up', 'arrow')
      } else {
        icon.classList.add('arrow')
      }
      if (this.showDialog) {
        this.showDialog = false
      } else {
        this.showDialog = true
      }
      console.log(this.showDialog)
    },
    clickTr(item, index) {
      this.flag4 = -1
      this.remove()
      this.flag = index
      // if (index < 5) {
        // this.setLayer(item)
        this.setLayer(item,'#f5c065')
        this.currentCity = item[0] + '市'
        // this.setRoute(item, index)
      // }
    },
    clickTr1(item,index) {
      _throttle(() => {
        this.flag = -1
        this.remove()
        this.flag4 = index
        // this.setLayer(item)
        this.setLayer(item,'#f5c065')
        this.currentCity = item[0] + '市'
        // this.setRoute(item, item[2])
        // this.setMarker(item)
      }, 300)()
    },
    clickTr2(item,index) {
      _throttle(() => {
        this.flag = -1
        this.remove()
        this.flag4 = item
        // this.setLayer(item)
        this.showContractInfo(index)
        this.setRoute1(item)
        

        // this.setMarker(item)
      }, 300)()
    },
    clickIcon(e, item, index) {
      // console.log(e)
      this.flag1 = index
      this.historyPoint = item
    },
    prev () {
      this.historyPoint = this.leftList[this.flag1]
      this.flag3 = 1
    },
    next () {
      if (this.flag1 === this.leftList.length - 1) {
        this.historyPoint = this.leftList[this.leftList[0]]
      } else {
        this.historyPoint = this.leftList[this.flag1 + 1]
      }
      this.flag3 = 2
    },
    setMap () {
      let that = this
      var options = {
        subdistrict: 0,//街道
        extensions: 'all',//延伸
        level: 'province'//级别：省份
      }
      var district = new window.AMap.DistrictSearch(options)
      // 查询河南省区域
      district.search('河南省', (status, result) => {
        var bounds = result.districtList[0]['boundaries']
        // 实例化地图
        this.map = new window.AMap.Map('boxMap', {
            zoom: 7.5,                //设置当前显示级别
            expandZoomRange:true,    //开启显示范围设置
            zooms: [3, 20],          //最小显示级别为7，最大显示级别为20
            center: [113.624129, 34.160339],
            // viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
            // zoomEnable: true,        //是否可以缩放地图
            // resizeEnable: true,
            mapStyle: "amap://styles/darkblue"
        })
        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
          new AMap.LngLat(-360,90,true),
          new AMap.LngLat(-360,-90,true),
          new AMap.LngLat(360,-90,true),
          new AMap.LngLat(360,90,true),
        ]
        var pathArray = [
          outer
        ]
        pathArray.push.apply(pathArray, bounds)
        // 添加描边
        var mask = new AMap.Polygon({
          path: pathArray,  // 边界坐标点集合
          fillColor: '#011c2d',  // 填充色
          // strokeColor: '#3078AC',
          fillOpacity: 0.5,      // 填充透明度
          strokeWeight: 3,       // 边框宽度，设为 0 表示没有边框
          zIndex: 1            // 显示优先级，越大越靠上层
        });
        this.map.add(mask)
        // 添加总路线 连霍高速
        // let color = [
        //   { name: '三门峡', color: '#99004C' },//00E400
        //   { name: '洛阳', color: '#99004C' },//FFFF00
        //   { name: '郑州', color: '#99004C' },//FF7E00
        //   { name: '开封', color: '#99004C' },//FF0000
        //   { name: '商丘', color: '#99004C' },//99004C
        //   { name: '安阳', color: '#99004C' },//99004C
        //   { name: '鹤壁', color: '#99004C' },//99004C
        //   { name: '新乡', color: '#99004C' },//99004C
        //   { name: '许昌', color: '#99004C' },//99004C
        //   { name: '漯河', color: '#99004C' },//99004C
        //   { name: '驻马店', color: '#99004C' },//99004C
        //   { name: '信阳', color: '#99004C' },//99004C
        //   { name: 'hh', color: '#7E0023' },//7E0023
        //   { name: 'mo', color: '#5CC0D4' }//5CC0D4 监控点位颜色
        // ]
        // that.pointArr.forEach((city, index) => {
        //   let useColor = color[index]
        //   city.forEach((item) => {
        
        //     let path = []
        //     item.forEach((point) => {
        //       path.push(new AMap.LngLat(point[0], point[1]))
        //     })
        //     let polyline = new AMap.Polyline({
        //     path: path,  
        //     strokeWeight : 5, // 线条宽度，默认为 1
        //     strokeColor: useColor.color, // 线条颜色
        //     lineJoin: 'round', // 折线拐点连接处样式
        //     zIndex: 1001           // 显示优先级，越大越靠上层
        //   })
        //   that.map.add(polyline)
        //   this.polylines.push(polyline)
        //   // that.remove()
        //   // that.setMarker([useColor.name])
        //   //   function showInfoM () {
        //   //   that.remove()
        //   //   that.setMarker([useColor.name])
        //   //   that.contract.length = 0
        //   //   that.contract = that.contractData1[index]
        //   // }
        //   // polyline.on('click', showInfoM)
        // })
        // })
        that.componyPoint.forEach((item, index) => {
          this.setLayer(item,'#011c2d')
          console.log(index)
        })
      })
          
    },
    remove () {
      // if (this.markers.length > 0) {
      //   this.map.remove(this.markers)
      // }
      if(this.mask2.length>0){//合同信息消除
        this.map.remove(this.mask2)
      }
      this.map.remove(this.mask3)
      if (this.mask1) {
        this.map.remove(this.mask1)
      }
    },
    remove1 () {
      this.map.remove(this.mask3)
    },
    // setMarker (cities) {
    //   let marker
    //   this.markerList.forEach((item) => {
    //     if (item[0] === cities[0]) {
    //       item[1].forEach((poi) => {
    //         marker = new AMap.MassMarks({
    //           map: this.map,
    //           offset: [0, -31],
    //           icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    //           position: poi
    //         })
    //         this.markers.push(marker)
    //         marker.on('click', this.showInfoA)
    //       })
    //     }
    //   })
    // },
    // setMarker(){
    //   this.markerList1.forEach((itemObj) => {
    //     itemObj.forEach((item)=>{

    //     })
    //   })
    // },
    showInfoA() {
      this.showMapDialog = true
      this.flag3 = 1
      this.historyPoint = this.leftList[0]
    },
    setLayer (item,fillColorValue) {
      var options = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      }
      var district = new window.AMap.DistrictSearch(options)
      // 查询区域
      district.search(item[0], (status, result) => {
        let bounds1 = result.districtList[0]['boundaries']
      // 添加描边
      this.mask1 = new AMap.Polygon({
          path: bounds1[bounds1.length - 1],  // 边界坐标点集合
          fillColor: fillColorValue,  // 填充色
          // fillColor:'#011c2d',
          // strokeColor: '#3078AC',
          fillOpacity: 0.3,      // 填充透明度
          strokeWeight: 1,       // 边框宽度，设为 0 表示没有边框
          zIndex: 999            // 显示优先级，越大越靠上层
        });
        // this.mask1 = mask
        this.map.add(this.mask1)
        this.mask1.on('mouseover',  () => {
          debounce(() => {
            console.log(999888)
            //,'鹤壁','新乡','许昌','漯河','驻马店','信阳'
            let cityList = [ '三门峡','洛阳', '郑州', '开封','商丘','安阳']
            let city = item[0]
            let isCompany = cityList.find(value => 
              value == city
            )
            if (this.currentCity !== city) {
              if (isCompany) {
                this.remove1()
                this.setLayer1([city])
                this.currentCity = city
              } else {
                this.remove1()
                this.currentCity = city
              }
            } 
         }, 200)()
        })
      })
    },
    setLayer1 (item) {
      var options = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      }
      var district = new window.AMap.DistrictSearch(options)
      // 查询区域
      district.search(item[0], (status, result) => {
        let bounds1 = result.districtList[0]['boundaries']
      // 添加描边
      this.mask3 = new AMap.Polygon({
          path: bounds1[bounds1.length - 1],  // 边界坐标点集合
          fillColor: 'rgb(245, 192, 101)',  // 填充色
            // strokeColor: '#3078AC',
          fillOpacity: 0.3,      // 填充透明度
          strokeWeight: 1,       // 边框宽度，设为 0 表示没有边框
          zIndex: 999            // 显示优先级，越大越靠上层
        });
        this.map.add(this.mask3);
      })
    },
    setRoute (dataLine, index) {
      // 绘制道路信息
      var color = [
        { name: '三门峡', color: '#00E400' },
        { name: '洛阳', color: '#FFFF00' },
        { name: '郑州', color: '#FF7E00' },
        { name: '开封', color: '#FF0000' },
        { name: '商丘', color: '#99004C' },
        { name: 'hh', color: '#7E0023' },
        { name: 'mo', color: '#5CC0D4' }// 监控点位颜色
      ]
      var polyline
      var lineColor = color[index]
      this.pointArr[index].forEach((item) => {
        let path = []
        item.forEach((point) => {
          path.push(new AMap.LngLat(point[0], point[1]))
        })
        polyline = new AMap.Polyline({
          path: path,  
          strokeWeight : 5, // 线条宽度，默认为 1
          strokeColor: lineColor.color, // 线条颜色
          lineJoin: 'round', // 折线拐点连接处样式
          zIndex: 1001           // 显示优先级，越大越靠上层
        })
        
        this.map.add(polyline)
        // let that = this
        function showInfoM() {
          // that.setMarker(dataLine)
        }
        polyline.on('click', showInfoM)
        this.polylines.push(polyline)
      })
    },
    //合同信息框
    showContractInfo(index){
      this.showContractDialog = true
      this.currentContract = this.contractData[index]
    },
    setRoute1 (road) {
      // 绘制道路信息
      var color = [
        { name: '三门峡', color: '#00E400' },
        { name: '洛阳', color: '#FFFF00' },
        { name: '郑州', color: '#FF7E00' },
        // { name: '开封', color: '#FF0000' },
        // { name: '商丘', color: '#99004C' },
        { name: '信阳', color: '#00E400' },
        { name: 'hh', color: '#7E0023' },
        { name: 'mo', color: '#5CC0D4' }// 监控点位颜色
      ]
      var polyline
      var lineColor
      
      road.forEach((po)=> {      
        this.pointArr[po].forEach((item) => {
          // alert(item)
          lineColor = color[po]
          let path = []
          item.forEach((point) => {
            path.push(new AMap.LngLat(point[0], point[1]))
          })
          polyline = new AMap.Polyline({
            path: path,  
            strokeWeight : 5, // 线条宽度，默认为 1
            strokeColor: lineColor.color, // 线条颜色
            lineJoin: 'round', // 折线拐点连接处样式
            zIndex: 1001           // 显示优先级，越大越靠上层
          })
          this.map.add(polyline)
          this.mask2.push(polyline);
          // let that = this
          // function showInfoM() {
          //   that.setMarker(dataLine)
          // }
          // polyline.on('click', showInfoM)
          // this.polylines.push(polyline)
        })
      })
    },

    
  }  
}
</script>

<style lang="scss">
#boxMap {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
// .map_contract_dialog{
//   .el-contract-dialog {
//     background: rgba(0, 0, 0, 0.6);
//     overflow: hidden;
//     border: 2px solid #0efcff;
//     border-radius: 5px;
//     box-shadow: 0 0 25px 15px rgba(14, 252, 255, 0.5);
//     .el-contract-dialog__title {
//       color: #fff;
//       .el-contract-dialog__close {
//         color: #fff;
//       }
//     }
//   }
// }

.map_dialog {
  .el-dialog {
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    border: 2px solid #0efcff;
    border-radius: 5px;
    box-shadow: 0 0 25px 15px rgba(14, 252, 255, 0.5);
    .el-dialog__title {
      color: #fff;
      .el-dialog__close {
        color: #fff;
      }
    }
    .el-dialog__body {
      padding: 0px 20px 20px;
    }
  }
  .top {
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .img {
      width: 45%;
    }
    .steps {
      width: 45%;
      height: 225px;
      // background: #03da8d;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      overflow: hidden;
        .step {
          display: flex;
          justify-content: start;
          .icon {
            position: relative;
            width: 25px;
            height: 35px;
            .point {
              position: absolute;
              top: 10px;
              left: 1px;
              z-index: 99;
              width: 17px;
              height: 17px;
              background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
              border-radius: 17px;
            }
            .lease {
              // background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
              background-image: linear-gradient(120deg, #ff9700 0%, #ed1c24 100%);
            }
            .used {
              background-image: linear-gradient(to top, #39b54a 0%, #8dc63f 100%);
            }
            .space {
              background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
            }
            .line {
              position: absolute;
              left: 9px;
              top: 0;
              width: 1px;
              height: 35px;
              background: rgb(112, 112, 119);
            }

          }
          .detail {
            span {
              line-height: 35px;
              display: block;
              float: left;
            }
            .num {
              width: 35px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .state {
              width: 50px;
            }
            .company {
              width: 200px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .used {
              width: 100px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .company {
              width: 100px;
            }
          }
          .current {
              color: red;
          }
        }
        .active {
          color: #0EFCFF;
        }
    }
  }
  .dialog_bottom {
    font-size: 16px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    .base_data, .pipe_data {
      width: 49%;
      p {
        color: #0efcff;
        background: rgba(255, 255, 255, 0.2);
        margin: 5px 0;
        width: 99%;
      }
      p, .btn_group, .step {
        margin: 5px 0;
      }
      .btn_group {
        width: 53%;
        height: 35px;
        display: flex;
        justify-content: space-between;
        margin: 10px 0 15px;
        button {
          width: 48%;
          border: 1px solid #fff;
          border-radius: 3px;
          color: #fff;
          background: transparent;
        }
        .active {
          border-color: #0EFCFF;
          color: #0EFCFF;
        }
      }
      .step {
        margin: 10px 0;
      }
      span {
        color: #fff;
      }
      .icon {
        float: left;
        position: relative;
        width: 25px;
        height: 40px;
        line-height: 40px;
        .point {
          position: absolute;
          top: 4px;
          left: 1px;
          z-index: 99;
          width: 17px;
          height: 17px;
          background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
          border-radius: 17px;
        }
        .lease {
              background-image: linear-gradient(120deg, #ff9700 0%, #ed1c24 100%);
            }
            .used {
              background-image: linear-gradient(to top, #39b54a 0%, #8dc63f 100%);
            }
            .space {
              background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
            }
      }
    }
  }
  
}

.boxRader {
  position: relative;
  width: 100%;
  height: 80%;
}

.centerBox {
  width: 75%;
  margin-right: 15px;
  background: transparent;
}

.boxFont {
  font-size: 1.2vw;
}

.centerMainBox1 {
  width: 100%;
  height: 60.5%;
}

.centerMainBox2 {
  width: 100%;
  height: 38.5%;
  position: relative;
  margin-top: 15px;
}

.centerMainBox2 img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.boxTitle2 {
  width: 100%;
  height: 10%;
  font-size: 0.6vw;
  text-align: center;
  line-height: 10%;
  margin-top: 1vw;
  color: #0efcff;
}

.boxLis {
  width: 70%;
  height: 1.5vw;
  margin-left: 3vw;
  margin-top: 1vw;
  border-bottom: 0.02vw solid rgb(40, 229, 233);
}

.boxLis > li {
  width: 4vw;
  height: 1.4vw;
  display: block;
  background: rgba(40, 229, 233, 0.5);
  margin-right: 0.5vw;
  color: #fff;
  line-height: 1.4vw;
  text-align: center;
  cursor: pointer;
}

.btn_left {
  position: relative;
}
.btn_right {
  position: relative;
  z-index: 99;
}
.sel_btn {
  position: absolute;
  z-index: 99;
  height: 26px;
  width: 100px;
  background: transparent;
  color: #0efcff;
  border: 1px solid #0efcff;
  border-radius: 3px;
  // font-size: 14px;
  line-height: 26px;
  padding: 3px 10px;
  overflow: hidden;
  margin: 2.8% 0 0.5% 1%;
}

.sel_btn i {
  float: right;
  line-height: 26px;
}

.arrow {
  transform: rotate(180deg);
  transition: all 0.5s;
}

.arrow-up {
  transform: rotate(0deg);
  transition: all 0.5s;
}

.list-dialog {
  position: absolute;
  z-index: 999;
  top: 45px;
  left: 10px;
  background: #164e5f;
  padding: 10px;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
}

.el-checkbox__input .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #0efcff !important;
  color: #0efcff !important;
  background-color: #164e5f !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #0efcff !important;
  color: #0efcff !important;
  background-color: #164e5f !important;
}

.el-checkbox.is-checked .el-checkbox__label {
  color: #0efcff !important;
}

.el-checkbox .el-checkbox__label {
  color: #fff !important;
}

.el-checkbox__inner:hover {
  border-color: #0efcff !important;
}

.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #0efcff !important;
}

.contList {
  position: relative;
  width: 70%;
  height: 7vw;
  margin: 1vw auto 0;
}

.el-checkbox-group {
  width: 470px;
  display: flex;
  flex-wrap: wrap;
}

.el-checkbox-group .el-checkbox {
  width: 200px;
}

.content1 li {
  display: none;
}

.baseBox {
  width: 100%;
  border: none;
  background: none;
}

.boxTitle {
  position: relative;
  z-index: 999;
  font-size: 1vw;
  width: 38%;
  margin-top: 1vw;
  text-align: center;
}

.right {
  float: right;
}

.baseBoxLeft {
  width: 30%;
  height: 95%;
  margin-top: 1%;
  position: relative;
}

.baseBoxRight {
  width: 68%;
  height: 75%;
}

.baseBoxLeft img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
}

.maps {
  width: 100%;
  height: 95%;
  margin-top: 2%;
  background: pink;
}

.baseBox1,
.baseBox2,
.baseBox3 {
  position: relative;
  z-index: 99;

}

.baseBox1 img,
.baseBox2 img,
.baseBox3 img {
  position: absolute;
  z-index: 99;
  top: 0;
  width: 100%;
  height: 211%;
}

.csbaseBox1 {
  position: relative;
  z-index: 999;
}

.liSpan {
  width: 100%;
  margin-top: 3.2%;
  text-align: center;
  color: rgb(40, 229, 233);
}

.liP {
  width: 90%;
  margin: 0.3vw auto 0;
  text-align: left;
  font-size: 0.5vw;
  color: rgb(40, 229, 233);
  display: flex;
  justify-content: space-around;
}

a:hover {
  text-decoration: none;
}

.titleName {
  color: #0efcff;
}

.plant {
  width: 90%;
  height: 5.5vw;
  margin: 2% auto 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
}

.plant > li {
  width: 32%;
  height: 100%;
  z-index: 999;
}

.jumps {
  width: 100%;
  height: 100%;
  background: rgba(0, 235, 255, 0.08);
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: space-between;
  display: -moz-flex;
  -moz-flex-direction: column;
  -moz-justify-content: space-between;
  display: flex;
  z-index: 99;
  flex-direction: column;
  justify-content: space-between;
}

.jumps > div > img {
  width: 0.88vw;
  height: 0.88vw;
  float: right;
}

.jumps > p {
  width: 90%;
  font-size: 1.3vw;
  color: #fff;
  margin: auto;
}

.jumps > div {
  width: 90%;
  margin: 5% auto 0;
}

.jumps > div > span {
  font-size: 0.6vw;
  color: #0efcff;
  float: left;
}

.spans0 {
  width: 80%;
  height: 5%;
  background: #03da8d;
}

.spans1 {
  width: 80%;
  height: 5%;
  background: #0efcff;
}

.spans2 {
  width: 80%;
  height: 5%;
  background: #fe0000;
}

.spans3 {
  width: 80%;
  height: 5%;
  background: #f78001;
}

.boxVideo {
  width: 100%;
  height: 100%;
}

.boxVideo video {
  width: 100%;
  height: 100%;
}

.baseDatas {
  width: 70%;
  height: 2vw;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  margin: 1vw 0 0 5vw;
}

.baseDatas li {
  width: 10%;
}

.baseDatas li a {
  color: #fff;
  font-size: 0.8vw;
}

.active2 a > span {
  color: rgb(40, 229, 233);
}

.baseDatas li a:hover > span {
  color: rgb(40, 229, 233);
}


.contract-data {
  width: 99.8%;
  height: 195px;
  overflow-y: scroll;
}

.contract-data::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

.contract-data::-webkit-scrollbar-thumb {
  background-color: #0efcff;
}

.borderActive {
  border-left-color: rgb(40, 229, 233);
  color: rgb(10, 12, 17);
}

.equipment-data {
  width: 99.8%;
  height: 50%;
  overflow-y: scroll;
}

.equipment-data::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

.equipment-data::-webkit-scrollbar-thumb {
  background-color: #0efcff;
}

.equipment-box {
  position: absolute;
  top: 48px;
  z-index: 99;
  width: 100%;
  height: 85%;
  // border: 1px solid #0EFCFF;
  overflow-y: scroll;
}
.right .equipment-box {
  position: absolute;
  top: 48px;
  z-index: 99;
  width: 100%;
  height: 180%;
  overflow-y: scroll;
}

.equipment-info {
  z-index: 99;
  position: absolute;
  top: 380px;
  color: #0efcff;
  font-size: 14px;
  line-height: 18px;
  padding-left: 25px;
}

.equipment-box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
  // color: rgb(245, 192, 101);
}

.equipment-box::-webkit-scrollbar-thumb {
  background-color: #0efcff;
}

.equipment_table {
  width: 95%;
  height: 25%;
  overflow-y: scroll;
  margin: auto;
  text-align: center;
  color: #fff;
  z-index: 99;
}

// .equipment_table tr:nth-child(1) {
//   // color: #0efcff;
// }
.equipment_table .active {
  color: #0efcff;
}

.equipment_table tr {
  height: 35px !important;
  overflow: hidden;
  border: 1px solid#0EFCFF;
  font-size: 1vw;
}

.table_left tr {
  border: 0;
}

// .equipment_table tr:nth-child(1) {
//   font-size: 1vw;
// }

.equipment_table img {
  width: 1vw;
}

.env_table {
  max-height: 78%;
  margin-top: 5%;
}

.env_table tr {
  height: 35px !important;
}

.env_table td {
  height: 35px !important;
  cursor: pointer;
  border: 1px solid#0EFCFF;
}

.table_left td {
  border: 0;
  cursor: pointer;
}

// .env_table tr:nth-child(1) {
  // background: rgba(14, 252, 255, 0.3);
// }
.env_table .active {
  background: rgba(14, 252, 255, 0.3);
}

.map {
  height: 450px;
  margin: 10px auto;
}

.mapContentFont {
  width: 85%;
  margin-left: 12%;
  font-size: 0.6vw;
  color: #0efcff;
  letter-spacing: 0.05vw;
  margin-bottom: 0.3vw;
}

.mapContentFont:nth-child(1) {
  margin-top: 0.6vw;
}

.mapContentFont span {
  color: white;
}
</style>
